<template>
  <div class="reputationManagement">
    <el-card shadow="hover">
      <div class="searchBox">
        <el-input placeholder="任务名称" v-model="content" style="width: 160px">
        </el-input>
        <el-button class="btn" @click="reputationListBtn" style="width: 80px"
          >查找</el-button
        >
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="宝石任务" name="1">
          <h2>宝石任务</h2>
          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column prop="title" label="任务名称"> </el-table-column>
            <el-table-column prop="reward" label="赠送宝石"> </el-table-column>
            <el-table-column prop="sort" label="排序"> </el-table-column>
            <el-table-column prop="jumpUrl" label="跳转链接"> </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_del"
                  class="tableScopeSwitch"
                  active-color="#13ce66"
                  active-text="正常"
                  inactive-color="#ff4949"
                  inactive-text="下架"
                  @change="changeSwitch(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="金币任务" name="2">
          <h2>金币任务</h2>
          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column prop="title" label="任务名称"> </el-table-column>
            <el-table-column prop="reward" label="赠送宝石"> </el-table-column>
            <el-table-column prop="sort" label="排序"> </el-table-column>
            <el-table-column prop="jumpUrl" label="跳转链接"> </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_del"
                  class="tableScopeSwitch"
                  active-color="#13ce66"
                  active-text="正常"
                  inactive-color="#ff4949"
                  inactive-text="下架"
                  @change="changeSwitch(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="coinHandleEdit(scope.row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="VIP专属金币任务" name="3">
          <h2>金币任务</h2>
          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column prop="title" label="任务名称"> </el-table-column>
            <el-table-column prop="reward" label="赠送宝石"> </el-table-column>
            <el-table-column prop="sort" label="排序"> </el-table-column>
            <el-table-column prop="jumpUrl" label="跳转链接"> </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.is_del"
                  class="tableScopeSwitch"
                  active-color="#13ce66"
                  active-text="正常"
                  inactive-color="#ff4949"
                  inactive-text="下架"
                  @change="changeSwitch(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="coinHandleEdit(scope.row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>

      <!-- 编辑弹框 -->
      <el-dialog
        title="编辑任务"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-form>
          <el-form-item label="任务名称" :label-width="formLabelWidth">
            <el-input
              v-model="titleB"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item :label="give" :label-width="formLabelWidth">
            <el-input
              v-model="reward"
              autocomplete="off"
              onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
              onafterpaste="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            ></el-input>
          </el-form-item>

          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input
              v-model="sort"
              autocomplete="off"
              onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
              onafterpaste="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
            ></el-input>
          </el-form-item>

          <el-form-item label="跳转链接" :label-width="formLabelWidth">
            <el-input v-model="jumpUrl" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              v-model="isDel"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正常"
              inactive-text="下架"
              class="tableScopeSwitch"
              active-value="0"
              inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editConfirmation">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  missionList,
  missionEdit,
  missionShelf,
} from "@/api/operationManagement";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      content: "", //搜索input
      tableData: [],
      titleB: "",
      is_del: "",
      reward: "",
      dialogVisible: false,
      give: "赠送宝石",
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      formLabelWidth: "120px",

      activeName: "1",
      isDel: "",
      jumpUrl: "",
      sort: "",
    };
  },
  methods: {
    // 状态切换
    changeSwitch(row) {
      if (row.is_del == 0) {
        missionShelf({
          id: row.id,
          isDel: "2",
        }).then((res) => {
          if (res.code == 0) {
            // this.reload();
            this.reputationListBtn();
          }
        });
      } else {
        missionShelf({
          id: row.id,
          isDel: "0",
        }).then((res) => {
          if (res.code == 0) {
            // this.reload();
            this.reputationListBtn();
          }
        });
      }
    },
    //获取列表
    missionList() {
      this.loading = true;
      missionList({
        page: this.page,
        pageSize: this.pageSize,
        content: this.content,
        type: this.activeName,
      }).then((res) => {
        if (res.code == 0) {
          let list = res.data.list;
          list.forEach((v) => {
            v.is_del = v.is_del == "0" ? true : false;
          });
          this.tableData = list;
          this.total = parseInt(res.data.count);
          this.loading = false;
        }
      });
    },
    ///搜索
    reputationListBtn() {
      this.missionList();
    },
    //编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.titleB = row.title;
      this.reward = row.reward;
      this.id = row.id;
      this.isDel = row.isDel;
      this.sort = row.sort;
      this.jumpUrl = row.jumpUrl;
    },
    editConfirmation() {
      missionEdit({
        id: this.id,
        title: this.titleB,
        reward: this.reward,
        type: this.activeName,
        sort: this.sort,
        jumpUrl: this.jumpUrl,
        isDel: this.isDel,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          // this.reload();
          this.reputationListBtn();
          this.dialogVisible = false;
        }
      });
    },
    //金币编辑
    coinHandleEdit(row) {
      this.give = "赠送金币";
      this.dialogVisible = true;
      this.titleB = row.title;
      this.reward = row.reward;
      this.id = row.id;
      this.isDel = row.isDel;
      this.sort = row.sort;
      this.jumpUrl = row.jumpUrl;
    },
    //分页
    getList() {
      this.missionList();
    },
    //选项卡
    handleClick(tab) {
      this.missionList();
    },
  },
  created() {
    this.missionList();
  },
};
</script>

<style lang="less" >
.reputationManagement {
  margin: 30px;
  height: 100%;
  .el-card {
    margin-bottom: 20px;
  }
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 300px;
      margin-right: 20px;
    }
  }
  .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  /*打开时文字位置设置*/
  .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: 6px; /*不同场景下可能不同，自行调整*/
  }
  /*关闭时文字位置设置*/
  .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 6px; /*不同场景下可能不同，自行调整*/
  }
  /*显示文字*/
  .tableScopeSwitch .el-switch__label.is-active {
    display: block;
  }
  .tableScopeSwitch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important; /*开关按钮的宽度大小*/
  }
  .el-dialog {
    p {
      font-size: 20px;
      .el-input {
        margin-top: 10px;
      }
    }
    .tableScopeSwitch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff;
    }
    .tableScopeSwitch .el-switch__label--right {
      z-index: 1;
      right: -8px;
    }
    /*关闭时文字位置设置*/
    .tableScopeSwitch .el-switch__label--left {
      z-index: 1;
      left: 20px;
    }
    /*显示文字*/
    .tableScopeSwitch .el-switch__label.is-active {
      display: block;
    }
    .tableScopeSwitch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 60px !important;
    }
  }
}
</style>